import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Query, Mutation } from 'react-apollo'
import {
  Image, Dropdown, Table, Checkbox, Header, Icon, Modal, Button,
} from 'semantic-ui-react'
import { global as globalDuck, users as usersDuck } from 'ducks'
import { TableRow, TableDeleteButton, OptionIcon } from 'components/memberTable'
import changeRole from 'graphql/changeMemberRole.graphql'

const optionsRole = [
  { key: 1, text: '成员', value: 'member' },
  { key: 2, text: '管理员', value: 'admin' },
]

class MemberTable extends Component {
  static propTypes = {
    actionSetActiveNavItem: PropTypes.func.isRequired,
    actionOpenAddUserModal: PropTypes.func.isRequired,
    actionOpenNewTeamModal: PropTypes.func.isRequired,
  }

  render() {
    const {
      members,
      selectedMembers,
      actionSetDeleteMembers,
      actionChangeMemberRole,
      actionOpenEditMemberModal,
      actionToogleSelectMember,
      queryMemberStr,
    } = this.props
    return (
      <Table basic="very" style={{ marginTop: '4em' }}>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell style={{ paddingLeft: '3em' }}>
              <Checkbox />
            </Table.HeaderCell>
            <Table.HeaderCell
              style={{
                wordBreak: 'keep-all',
                whiteSpace: 'nowrap',
              }}
            >
              所有成员
              {Object.keys(selectedMembers).length > 0 && (
                <TableDeleteButton as="a">
                  <Icon name="delete" />
                  删除所选成员
                </TableDeleteButton>
              )}
            </Table.HeaderCell>
            <Table.HeaderCell>角色</Table.HeaderCell>
            <Table.HeaderCell>加入时间</Table.HeaderCell>
            <Table.HeaderCell></Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {members.result.map((memberid) => {
            const member = members.entities.member[memberid]
            const isSelected = selectedMembers[memberid] === true
            if (member.type === 'member' && (member.name.includes(queryMemberStr) || queryMemberStr === '')) {
              return (
                <TableRow>
                  <Table.Cell className="first-cell" width={1} collapsing>
                    <Checkbox
                      onClick={() => actionToogleSelectMember(memberid, !isSelected)}
                      checked={isSelected}
                    />
                  </Table.Cell>
                  <Table.Cell collapsing width={9} textAlign="left">
                    <Header as="h4">
                      <Image
                        style={{ width: '50px' }}
                        avatar
                        src={member.avatar}
                        size="mini"
                        verticalAlign="middle"
                      />
                      <Header.Content>
                        {member.name}
                        <Header.Subheader>{member.bio}</Header.Subheader>
                      </Header.Content>
                    </Header>
                  </Table.Cell>
                  <Table.Cell width={2} collapsing>
                    <Mutation
                      mutation={changeRole}
                      onCompleted={data => actionChangeMemberRole(member.id, data.ChangeMemberRole.role)
                      }
                    >
                      {(addTodo, { data, loading, error }) => (
                        <Dropdown
                          options={optionsRole}
                          value={member.role}
                          onChange={(e, { value }) => addTodo({ variables: { id: member.id, role: value } })
                          }
                        />
                      )}
                    </Mutation>
                  </Table.Cell>
                  <Table.Cell width={2} collapsing>
                    {member.createAt}
                  </Table.Cell>
                  <Table.Cell className="last-cell" width={2} collapsing textAlign="right">
                    <OptionIcon
                      className="options"
                      color="blue"
                      name="pencil alternate"
                      onClick={actionOpenEditMemberModal}
                    />
                    <OptionIcon
                      className="options"
                      color="blue"
                      name="trash alternate"
                      onClick={() => actionSetDeleteMembers([member.id])}
                    />
                  </Table.Cell>
                </TableRow>
              )
            }
          })}
        </Table.Body>
      </Table>
    )
  }
}

const mapStateToProps = state => ({
  selectedMembers: usersDuck.selectors.selectedMembers(state),
  members: usersDuck.selectors.members(state),
  queryMemberStr: usersDuck.selectors.queryMemberStr(state),
})

const mapDispatchToProps = {
  actionSetDeleteMembers: usersDuck.creators.actionSetDeleteMembers,
  actionChangeMemberRole: usersDuck.creators.actionChangeMemberRole,
  actionOpenEditMemberModal: usersDuck.creators.actionOpenEditMemberModal,
  actionToogleSelectMember: usersDuck.creators.actionToogleSelectMember,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(MemberTable)
